<template>
  <div class="enterprise">
    <!-- 搜索部分 -->
    <el-card>
      <el-form ref="searchFormRef" :model="searchForm" :inline="true">
        <el-form-item label="企业编号" prop="eid">
          <el-input class="labelwidth" v-model="searchForm.eid"></el-input>
        </el-form-item>
        <el-form-item label="企业名称" prop="name">
          <el-input class="labelwidth" v-model="searchForm.name"></el-input>
        </el-form-item>
        <el-form-item label="创建者" prop="username">
          <el-input class="labelwidth" v-model="searchForm.username"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            class="labelwidth"
            v-model="searchForm.status"
            placeholder="请选择状态"
          >
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="primary">搜索</el-button>
          <el-button @click="clear" type="default">清除</el-button>
          <el-button @click="add" type="primary">+新增企业</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 列表部分 & 分页组件 -->
    <el-card class="cardBody">
      <el-table :data="enterpriseList" style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column label="企业编号" prop="eid"></el-table-column>
        <el-table-column
          label="企业名称"
          prop="name"
          width="180"
        ></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column
          label="创建日期"
          prop="create_time"
          width="180"
        ></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div :class="scope.row.status === 0 ? 'red' : ''">
              {{ scope.row.status === 0 ? '禁用' : '启用' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="default">编辑</el-button>
            <el-button
              @click="changeStatus(scope.row.id)"
              :type="scope.row.status === 0 ? 'success' : 'info'"
              >{{ scope.row.status === 0 ? '启用' : '禁用' }}</el-button
            >
            <el-button @click="del(scope.row.id)" type="default"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 新增或是修改弹出框 -->
    <enterprice ref="enterpriceRef" :mode="mode" />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import Enterprice from './enterprice-add-or-update.vue'
import {
  getEnterpriseList,
  changeEnterPriseStatus,
  deleteEnterprise
} from '@/api/enterprise'
@Component({
  components: {
    Enterprice
  }
})
export default class EnterpriceList extends Vue {
  declare searchForm: any
  declare page: number
  declare limit: number
  declare enterpriseList: any
  declare total: number
  declare mode: string

  data() {
    return {
      searchForm: {
        eid: '', // 企业编号
        name: '', // 企业名称
        username: '', // 创建者
        status: '' // 状态
      },
      enterpriseList: [], // 企业列表
      page: 1, // 页面
      limit: 2, // 页容量
      total: 0, // 总条数
      mode: 'add' // 模式
    }
  }
  created() {
    this.getEnterpriseListData()
  }
  async getEnterpriseListData() {
    const res = await getEnterpriseList({
      page: this.page,
      limit: this.limit,
      ...this.searchForm
    })

    if (res.data.code === 200) {
      this.enterpriseList = res.data.data.items
      this.total = res.data.data.pagination.total
    }
  }
  // 搜索
  search() {
    // 从第一页开始搜索
    this.page = 1

    this.getEnterpriseListData()
  }
  // 清除
  clear() {
    // this.searchForm = {
    //   eid: '', // 企业编号
    //   name: '', // 企业名称
    //   username: '', // 创建者
    //   status: '' // 状态
    // }

    // 清空表单项目el-form-item中的值，前提是需要给el-form-item设置prop
    ;(this.$refs.searchFormRef as any).resetFields()

    this.search()
  }
  // 页容量改变了
  handleSizeChange(size: number) {
    this.limit = size

    this.search()
  }
  // 页码改变了
  handleCurrentChange(page: number) {
    this.page = page

    this.getEnterpriseListData()
  }
  // 更改状态
  async changeStatus(id: string) {
    const res = await changeEnterPriseStatus({ id })

    if (res.data.code === 200) {
      this.$message.success('更改状态成功~')

      this.search()
    }
  }
  // 新增
  add() {
    ;(this.$refs.enterpriceRef as any).enterpriceForm = {
      eid: '', // 企业编号
      name: '', // 企业名称
      short_name: '', // 企业简称
      intro: '', // 企业简介
      remark: '' // 企业备注
    }
    ;(this.$refs.enterpriceRef as any).dialogVisible = true
  }
  // 编辑
  edit(enterprice: any) {
    this.mode = 'edit'
    ;(this.$refs.enterpriceRef as any).enterpriceForm = JSON.parse(
      JSON.stringify(enterprice)
    )
    ;(this.$refs.enterpriceRef as any).dialogVisible = true
  }
  // 删除
  del(id: string) {
    this.$confirm('确定删除该条记录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        const res = await deleteEnterprise({ id })

        if (res.data.code === 200) {
          this.$message.success('删除成功~')

          this.search()
        }
      })
      .catch(err => {
        console.log(err)
      })
  }
}
</script>

<style lang="scss" scoped>
.enterprise {
  .labelwidth {
    width: 130px;
  }
  .pagination {
    text-align: center;
    margin-top: 20px;
  }
  .cardBody {
    margin-top: 25px;
  }
  .red {
    color: red;
  }
}
</style>
